<template>
  <div>
      <div class="lingt_box position_box">
      </div>
      <div class="income_box_start position_box" ref="income"></div>
      <div class="by_stages_start position_box" ref="stages"></div>
      <div class="best_plan_start position_box" ref="plan" @click="$router.push('/brain/IntelligentSolution')"></div>
      <div class="the_best_start position_box" ref="best"></div>
      <div class="role_left_box_start" ref="roleLeft">
          <div class="role_left_content">
              <div class="role_left_text">用户最优转化</div>
          </div>
      </div>
      <div class="role_right_box_start" ref="roleRight">
          <div class="role_right_content">
              <p class="role_right_text">商户最优收益</p>
          </div>
      </div>
      <div class="intergense_user_start position_box" ref="user"></div>
      <div class="intergense_photo_start position_box" ref="photo"></div>
      <div class="intergense_stratgy_start position_box" ref="stratgy"></div>
      <div class="intergense_plan_start position_box" ref="plan_"></div>
      <div class="text_user_start position_box" ref="text_user">首付需求、期限需求、利率需求、消费水平、婚姻状况、工作单位、资产状况、教育水平、收入水平、行为偏好、信用风险、欺诈风险</div>
      <div class="text_photo_start position_box" ref="text_photo">商品价格、偏好群体、销量排名、性能参数、商品型号、投放区域、销售模式、收益模式</div>
      <div class="text_stratgy_start position_box" ref="text_stratgy">市场渗透策略、用户运营策略、资金运营策略、收益最优策略、风险控制策略、定价调整策略</div>
      <div class="text_plan_start position_box" ref="text_plan">准入规则、禁入规则、首付比例、分期期限、可贷额度、定价方案</div>
  </div>
</template>

<script>
export default {
    name:'Intelligence',
    mounted(){
        setTimeout(()=>{
            this.$refs.income.className = 'income_box position_box'
        },1000)
        setTimeout(()=>{
            this.$refs.stages.className = 'by_stages position_box'
        },2000)
        setTimeout(()=>{
            this.$refs.plan.className = 'best_plan position_box'
        },3000)
        setTimeout(()=>{
            this.$refs.best.className = 'the_best position_box'
        },4000)
        setTimeout(()=>{
            this.$refs.user.className = 'intergense_user position_box'
            this.$refs.photo.className = 'intergense_photo position_box'
            this.$refs.stratgy.className = 'intergense_stratgy position_box'
            this.$refs.plan_.className = 'intergense_plan position_box'
        },5000)
        setTimeout(()=>{
            this.$refs.text_user.className = 'text_user position_box'
            this.$refs.text_photo.className = 'text_photo position_box'
            this.$refs.text_stratgy.className = 'text_stratgy position_box'
            this.$refs.text_plan.className = 'text_plan position_box'
        },6000)
        setTimeout(()=>{
            this.$refs.roleLeft.className = 'role_left_box'
            this.$refs.roleRight.className = 'role_right_box'
        },7000)
    }
}
</script>

<style scoped>
@keyframes role_box {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
@keyframes role_content {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(-720deg);
    }
}
@keyframes role_text {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
.role_left_box_start{
    position: absolute;
    width:8.28125vw;
    height:8.28125vw;
    top:8.984375vw;
    left:34.166666666666664vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('../../assets/img/role_box.png');
    background-size:100% 100% ;
    opacity: 0;
    transition: all 1s;
}
.role_left_box{
    position: absolute;
    width:8.28125vw;
    height:8.28125vw;
    top:8.984375vw;
    left:34.166666666666664vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('../../assets/img/role_box.png');
    background-size:100% 100% ;
    opacity: 1;
    transition: all 1s;
    animation-name: role_box;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.role_left_content{
    width:6.328125vw;
    height:6.328125vw;
    background: url('../../assets/img/role_content.png');
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
        animation-name: role_content;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.role_left_text{
    font-family: FZLTZHK--GBK1-0, FZLTZHK--GBK1;
    font-weight: normal;
    font-size:0.9114583333333334vw;
    color: #2FD192;
    animation-name: role_text;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.role_right_box_start{
    position: absolute;
    width:5.807291666666667vw;
    height:5.807291666666667vw;
    top:12.786458333333334vw;
    left:57.52604166666667vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('../../assets/img/role_box.png');
    background-size:100% 100% ;
    opacity: 0;
    transition: all 1s;
}
.role_right_box{
    position: absolute;
    width:5.807291666666667vw;
    height:5.807291666666667vw;
    top:12.786458333333334vw;
    left:57.52604166666667vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('../../assets/img/role_box.png');
    background-size:100% 100% ;
    opacity: 1;
    transition: all 1s;
    animation-name: role_box;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.role_right_content{
    width:5.677083333333333vw;
    height:5.677083333333333vw;
    background: url('../../assets/img/role_content.png');
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
        animation-name: role_content;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.role_right_text{
    font-family: FZLTZHK--GBK1-0, FZLTZHK--GBK1;
    font-weight: normal;
    font-size:0.9114583333333334vw;
    color: #2FD192;
    animation-name: role_text;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes active_box{
    0%{
        transform: translateY(-0.4vw);
    }
    40%{
        transform: translateY(0.5vw);
    }
    50%{
        transform: translateY(0.6vw);
    }
    90%{
        transform: translateY(-0.5vw);
    }
    100%{
        transform: translateY(-0.4vw);
    }
}
.lingt_box{
    width: 43.776041666666664vw;
    height: 49.661458333333336vw;
    background: url('../../assets/img/light_box.png');
    top:6.588541666666667vw;
    left: 27.890625000000004vw;
}
.income_box_start{
    width: 5.135417vw;
    height: 1.145833vw;
    background: url('../../assets/img/income.png');
    top: 44.65625vw;
    left: 46.854167vw;
    opacity: 0;
    transition: all 1s;
}

.income_box{
    width: 22.135416666666664vw;
    height: 6.145833333333333vw;
    background: url('../../assets/img/income.png');
    top: 37.65625vw;
    left: 38.854166666666664vw;
    opacity: 1;
    transition: all 1s;
     animation-name: active_box;
     animation-duration: 3s;
     animation-iteration-count: infinite;
     animation-timing-function: linear;
}
.by_stages_start{
    top: 38.109375vw;
    left: 46.291667vw;
    width: 5.427083vw;
    height: 2.34375vw;
    opacity: 0;
    background: url('../../assets/img/by_stages.png');
    transition: all 1s;
}
.by_stages{
    top: 27.109375000000004vw;
    left: 42.291666666666664vw;
    width: 14.427083333333332vw;
    height: 7.34375vw;
    background: url('../../assets/img/by_stages.png');
    opacity: 1;
    transition: all 1s;
         animation-name: active_box;
     animation-duration: 3s;
     animation-iteration-count: infinite;
     animation-timing-function: linear;

}
.best_plan_start{
    width: 3.9375vw;
    height: 2.536458vw;
    top: 26.046875vw;
    left: 47.036458vw;
    opacity: 0;
    background: url('../../assets/img/best_plan.png');
     transition: all 1s;
}
.best_plan{
    width: 10.9375vw;
    height: 6.536458333333334vw;
    top: 18.046875vw;
    left: 44.036458333333336vw;
    background: url('../../assets/img/best_plan.png');
     transition: all 1s;
              animation-name: active_box;
     animation-duration: 3s;
     animation-iteration-count: infinite;
     animation-timing-function: linear;
     cursor: pointer;
    }

    .the_best_start{
    width: 5.505208vw;
    height: 3.302083vw;
    top: 18.447917vw;
    left: 46.739583vw;
    opacity: 0;
    background: url('../../assets/img/the_best.png');
     transition: all 1s;
    }
.the_best{
    width: 9.505208333333332vw;
    height: 6.302083333333333vw;
    top: 12.447916666666666vw;
    left: 44.739583333333336vw;
    opacity: 1;
    background: url('../../assets/img/the_best.png');
     transition: all 1s;
              animation-name: active_box;
     animation-duration: 3s;
     animation-iteration-count: infinite;
     animation-timing-function: linear;
}

.position_box{
 background-size: 100% 100%;
    position:absolute;
}
.intergense_user_start{
width:14.21875vw;
height:7.916666666666666vw;
top:15.260416666666668vw;
left:14.65625vw;
background: url('../../assets/img/intergense_user.png');
background-size:100% 100% ;
opacity: 0;
transition: all 1s;
}
.intergense_user{
width:14.21875vw;
height:7.916666666666666vw;
top:15.260416666666668vw;
left:12.65625vw;
background: url('../../assets/img/intergense_user.png');
background-size:100% 100% ;
opacity: 1;
transition: all 1s;
 /* animation-name: active_box;
     animation-duration: 3s;
     animation-iteration-count: infinite;
     animation-timing-function: linear; */
}
.intergense_photo_start{
width:13.828125vw;
height:5.78125vw;
top:32.8609375vw;
left:15.515625vw;
background: url('../../assets/img/intergense_photo.png');
background-size:100% 100% ;
opacity: 0;
transition: all 1s;
}

.intergense_photo{
width:13.828125vw;
height:5.78125vw;
top:32.8609375vw;
left:13.515625vw;
background: url('../../assets/img/intergense_photo.png');
background-size:100% 100% ;
opacity: 1;
transition: all 1s;
 /* animation-name: active_box;
     animation-duration: 3s;
     animation-iteration-count: infinite;
     animation-timing-function: linear; */
}
.intergense_stratgy_start{
    width:12.864583333333332vw;
height:4.791666666666667vw;
top:17.161458333333332vw;
left:70.625vw;
background: url('../../assets/img/intergense_stratgy.png');
    background-size:100% 100% ;
    opacity: 0;
transition: all 1s;
}
.intergense_stratgy{
    width:12.864583333333332vw;
height:4.791666666666667vw;
top:17.161458333333332vw;
left:72.625vw;
background: url('../../assets/img/intergense_stratgy.png');
    background-size:100% 100% ;
    transition: all 1s;
 /* animation-name: active_box;
     animation-duration: 3s;
     animation-iteration-count: infinite;
     animation-timing-function: linear; */
}
.intergense_plan_start{
width:14.088541666666668vw;
height:4.869791666666667vw;
top:33.809635416666666vw;
left:70.58333333333333vw;
background: url('../../assets/img/intergense_plan.png');
background-size:100% 100% ;
    opacity: 0;
transition: all 1s;
}
.intergense_plan{
width:14.088541666666668vw;
height:4.869791666666667vw;
top:33.809635416666666vw;
left:72.58333333333333vw;
background: url('../../assets/img/intergense_plan.png');
background-size:100% 100% ;
    transition: all 1s;
 /* animation-name: active_box;
     animation-duration: 3s;
     animation-iteration-count: infinite;
     animation-timing-function: linear; */
}
.text_user_start{
    width:18.307291666666668vw;
height:3.90625vw;
top:19.265625vw;
left:8.59375vw;
font-family: FZLTZHK--GBK1-0, FZLTZHK--GBK1;
font-weight: normal;
font-size: 0.8333333333333334vw;
color: #B2E9FF;
    opacity: 0;
transition: all 1s;
}
.text_user{
    width:18.307291666666668vw;
height:3.90625vw;
top:22.265625vw;
left:8.59375vw;
font-family: FZLTZHK--GBK1-0, FZLTZHK--GBK1;
font-weight: normal;
font-size: 0.8333333333333334vw;
color: #B2E9FF;
background-size:100% 100% ;
    transition: all 1s;
}
.text_photo_start{
width:18.307291666666668vw;
height:2.604166666666667vw;
top:35.776041666666664vw;
left:8.59375vw;
font-size: 0.8333333333333334vw;
font-family: FZLTZHK--GBK1-0, FZLTZHK--GBK1;
font-weight: normal;
color: #B2E9FF;
    opacity: 0;
transition: all 1s;
}
.text_photo{
width:18.307291666666668vw;
height:2.604166666666667vw;
top:38.776041666666664vw;
left:8.59375vw;
font-size: 0.8333333333333334vw;
font-family: FZLTZHK--GBK1-0, FZLTZHK--GBK1;
font-weight: normal;
color: #B2E9FF;
    opacity: 1;
transition: all 1s;
}
.text_stratgy_start{
width:18.307291666666668vw;
height:2.604166666666667vw;
top:19.265625vw;
left:72.578125vw;
font-size: 0.8333333333333334vw;
font-family: FZLTZHK--GBK1-0, FZLTZHK--GBK1;
font-weight: normal;
color: #B2E9FF;
    opacity: 0;
transition: all 1s;
}
.text_stratgy{
width:18.307291666666668vw;
height:2.604166666666667vw;
top:22.265625vw;
left:72.578125vw;
font-size: 0.8333333333333334vw;
font-family: FZLTZHK--GBK1-0, FZLTZHK--GBK1;
font-weight: normal;
color: #B2E9FF;
    opacity: 1;
transition: all 1s;
}
.text_plan_start{
width:18.307291666666668vw;
height:2.604166666666667vw;
top:35.776041666666664vw;
left:72.578125vw;
font-size: 0.8333333333333334vw;
font-family: FZLTZHK--GBK1-0, FZLTZHK--GBK1;
font-weight: normal;
color: #B2E9FF;
    opacity: 0;
transition: all 1s;
}
.text_plan{
width:18.307291666666668vw;
height:2.604166666666667vw;
top:38.776041666666664vw;
left:72.578125vw;
font-size: 0.8333333333333334vw;
font-family: FZLTZHK--GBK1-0, FZLTZHK--GBK1;
font-weight: normal;
color: #B2E9FF;
    opacity: 1;
transition: all 1s;
}
</style>